<template>
    <div>
        付薪后
        <!-- 全职员工数据 -->
        <div class="flexColumn">
            <div id='hostPayTotal' class="payOptionTotal"></div>
            <div class="flexConent">
                <div id="prescriptionDetailOne" class="prescriptionDetailOne"></div>
                <div id="prescriptionDetailTwo" class="prescriptionDetailTwo"></div>
            </div>
            <div id='averageDuration' class="averageduration"></div>
            <div id='PayCalendar' v-if="stationPerson==1" class="PayCalendar"></div>
            <div class="flexColumn" v-else>
                <div class="flexConent">
                    <el-select style="margin-top: 0.2rem;" v-if="stationPerson==0" v-model="areaValue" placeholder="请选择"
                        @change="changeArea" size="mini">
                        <el-option v-for="item in areaData" :key="item.value" :label="item.name" :value="item.value">
                        </el-option>
                    </el-select>
                    <el-select style="margin-top: 0.2rem;" v-if="stationPerson==0" v-model="operatorValue"
                        placeholder="请选择" @change="changeOperator" size="mini">
                        <el-option v-for="item in operatorData" :key="item.value" :label="item.name"
                            :value="item.value">
                        </el-option>
                    </el-select>
                    <el-input type="text" @click='changeNum' v-model='numValue'></el-input>
                </div>
                <div id='PayFindCalendar' class="PayFindCalendar"></div>
            </div>
            <div id='paymentDetails' class="paymentDetails"></div>
            <!-- 实习员工数据 -->
            <!-- 实习时效总览 -->
            <div id='raineePayOption' class="raineePayOption">
            </div>
            <!-- 实习时效明细 -->
            <div class="flexConent">
                <div id='HostPracticeDetailOne' class="HostPracticeDetailOne"></div>
                <div id='HostPracticeDetailTwo' class="HostPracticeDetailTwo"></div>
            </div>
            <!-- 平台汇总数据 -->
            <div id='PracticeAverageDuration' class="PracticeAverageDuration"></div>
            <div id='practicePayCalendar' v-if="stationPerson==1" class="practicePayCalendar"></div>
            <div class="flexColumn" v-else>
                <div class="flexConent">
                    <el-select style="margin-top: 0.2rem;" v-if="stationPerson==0" v-model="areaValueP"
                        placeholder="请选择" @change="changeAreaP" size="mini">
                        <el-option v-for="item in areaDataP" :key="item.value" :label="item.name" :value="item.value">
                        </el-option>
                    </el-select>
                    <el-select style="margin-top: 0.2rem;" v-if="stationPerson==0" v-model="operatorValueP"
                        placeholder="请选择" @change="changeOperatorP" size="mini">
                        <el-option v-for="item in operatorDataP" :key="item.value" :label="item.name"
                            :value="item.value">
                        </el-option>
                    </el-select>
                    <el-input type="text" @click='changeNumP' v-model='numValueP'></el-input>
                </div>
                <div id='HostpracticePayFindCalendar' class="HostpracticePayFindCalendar"></div>
            </div>
            <div id='practicePaymentDetails' class="practicePaymentDetails"></div>
            <div>
                <a href="">一键导出明细表</a>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['payType', 'stationPerson'],
        watch: {
            stationPerson() {
                this.$nextTick(() => {
                    this.getPayUpdate()
                })
            }
        },
        data() {
            return {
                areaData: [{ name: '河南', value: 1 }, { name: '河北', value: 2 }, { name: '重庆', value: 3 }],
                areaDataP: [{ name: '河南', value: 1 }, { name: '河北', value: 2 }, { name: '重庆', value: 3 }],
                areaValue: 1,
                operatorValue: 1,
                numValue: '',
                areaValueP: 1,
                operatorValueP: 1,
                numValueP: '',
                operatorData: [{ name: '晶晶', value: 1 }, { name: '喃喃', value: 2 }, { name: '花花', value: 3 }],
                operatorDataP: [{ name: '晶晶', value: 1 }, { name: '喃喃', value: 2 }, { name: '花花', value: 3 }],
                HostpayOptionTotalOption: {},//全职时效总览
                HostPrescriptionDetailOption: {}, //提交时效明细1
                HostPrescriptionDetailOption1: {},//提交时效明细2
                HostPracticeDetailOption: {},//实习职工提交时效明细1
                HostPracticeDetailOption1: {},//实习职工提交时效明细2
                HostAverageDurationOption: {},//平均处理时效
                HostPracticeAverageDurationOption: {},//平均处理时效实习
                HostPayCalendarOption: {},//当月付薪日历责任人视角
                HostPayFindCalendarOption: {},//当月付薪日历台长视角
                unpaidDetails: {},//未支付明细单据
                HostpayTraineePayOptionTotalOption: {},//实习
                HostpracticePayCalendarOption: {},
                HostpracticePayFindCalendarOption: {},//台长实习付薪日历
                HostPaymentDetailsOption: {},//未支付明细单据
                HostPracticePaymentDetailsOption: {} //实习未支付明细单据
            }
        },
        mounted() {
            this.getPayUpdate()
        },
        methods: {
            changeArea() {

            },
            changeOperator() {

            },
            changeNum() {

            },
            changeAreaP() {

            },
            changeOperatorP() {

            },
            changeNumP() {

            },
            getPayUpdate() {
                this.getHostPayTotal()//付薪进度总览
                this.getHostPayDetail()
                this.getHostAverageDuration()
                this.getHostPayFindCalendar()
                this.getPaymentDetails()
                let hostPayOptionTotal = this.$echarts.init(
                    document.getElementById("hostPayTotal")
                );
                hostPayOptionTotal.clear()
                hostPayOptionTotal.setOption(this.HostpayOptionTotalOption, false);

                let prescriptionDetail = this.$echarts.init(
                    document.getElementById("prescriptionDetailOne")
                );
                prescriptionDetail.clear()
                prescriptionDetail.setOption(this.HostPrescriptionDetailOption, false);

                let prescriptionDetail1 = this.$echarts.init(
                    document.getElementById("prescriptionDetailTwo")
                );
                prescriptionDetail1.clear()
                prescriptionDetail1.setOption(this.HostPrescriptionDetailOption1, false);
                let HostPracticeDetailOne = this.$echarts.init(
                    document.getElementById("HostPracticeDetailOne")
                );
                HostPracticeDetailOne.clear()
                HostPracticeDetailOne.setOption(this.HostPracticeDetailOption, false);

                let HostPracticeDetailTwo = this.$echarts.init(
                    document.getElementById("HostPracticeDetailTwo")
                );
                HostPracticeDetailTwo.clear()
                HostPracticeDetailTwo.setOption(this.HostPracticeDetailOption1, false);

                let averageDuration = this.$echarts.init(
                    document.getElementById("averageDuration")
                );
                averageDuration.clear()
                averageDuration.setOption(this.HostAverageDurationOption, false);

                let PracticeAverageDuration = this.$echarts.init(
                    document.getElementById("PracticeAverageDuration")
                );
                PracticeAverageDuration.clear()
                PracticeAverageDuration.setOption(this.HostPracticeAverageDurationOption, false);
                if (this.stationPerson == 1) {
                    var PayCalendar = this.$echarts.init(
                        document.getElementById("PayCalendar")
                    );
                    PayCalendar.clear()
                    PayCalendar.setOption(this.HostPayCalendarOption, false);
                    var practicePayCalendar = this.$echarts.init(
                        document.getElementById("practicePayCalendar")
                    );
                    practicePayCalendar.clear()
                    practicePayCalendar.setOption(this.HostpracticePayCalendarOption, false);
                } else {
                    var PayFindCalendar = this.$echarts.init(
                        document.getElementById("PayFindCalendar")
                    );
                    PayFindCalendar.clear()
                    PayFindCalendar.setOption(this.HostPayFindCalendarOption, false);

                    var HostpracticePayFindCalendar = this.$echarts.init(
                        document.getElementById("HostpracticePayFindCalendar")
                    );
                    HostpracticePayFindCalendar.clear()
                    HostpracticePayFindCalendar.setOption(this.HostpracticePayFindCalendarOption, false);
                }

                // 实习员工数据；
                // 实习员工提交时效总览
                let raineePayOption = this.$echarts.init(
                    document.getElementById("raineePayOption")
                );
                raineePayOption.clear()
                raineePayOption.setOption(this.HostpayTraineePayOptionTotalOption, false);

                let paymentDetails = this.$echarts.init(
                    document.getElementById("paymentDetails")
                );
                paymentDetails.clear()
                paymentDetails.setOption(this.HostPaymentDetailsOption, false);

                let practicePaymentDetails = this.$echarts.init(
                    document.getElementById("practicePaymentDetails")
                );
                practicePaymentDetails.clear()
                practicePaymentDetails.setOption(this.HostPracticePaymentDetailsOption, false);

                window.onresize = function () {
                    hostPayOptionTotal.resize(); //付薪总览报告
                    prescriptionDetail.resize()
                    prescriptionDetail1.resize()
                    averageDuration.resize()
                    this.stationPerson == 1 ? PayCalendar.resize() : PayFindCalendar.resize()
                    // 实习员工
                    raineePayOption.resize() // 实习员工提交时效总览
                    HostPracticeDetailOne.resize() //实习员工明细1
                    HostPracticeDetailTwo.resize() //实习员工明细2
                }
            },
            // 提交时效总览
            getHostPayTotal() {
                let option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },
                    // legend: {
                    //     orient: 'vertical',
                    //     x: 'left',
                    //     // data: ['直达', '营销广告', '搜索引擎', '邮件营销']
                    // },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: ['20%', '40%'],
                            center: ['50%', '35%'],
                            label: {
                                normal: {
                                    // formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                                    formatter: '{c} ',
                                    backgroundColor: '#efefef',
                                    borderColor: '#aaa',
                                    borderWidth: 1,
                                    borderRadius: 4,
                                    // shadowBlur:3,
                                    // shadowOffsetX: 2,
                                    // shadowOffsetY: 2,
                                    // shadowColor: '#999',
                                    // padding: [0, 7],
                                    // rich: {
                                    //     a: {
                                    //         color: '#999',
                                    //         lineHeight: 22,
                                    //         align: 'center'
                                    //     },
                                    //     // abg: {
                                    //     //     backgroundColor: '#333',
                                    //     //     width: '100%',
                                    //     //     align: 'right',
                                    //     //     height: 22,
                                    //     //     borderRadius: [4, 4, 0, 0]
                                    //     // },
                                    //     hr: {
                                    //         borderColor: '#aaa',
                                    //         width: '100%',
                                    //         borderWidth: 0.5,
                                    //         height: 0
                                    //     },
                                    //     b: {
                                    //         fontSize: 12,
                                    //         lineHeight: 14
                                    //     },
                                    //     per: {
                                    //         color: '#eee',
                                    //         backgroundColor: '#334455',
                                    //         padding: [2, 4],
                                    //         borderRadius: 2
                                    //     }
                                    // }
                                }
                            },
                            data: [

                            ]
                        }
                    ]
                };
                this.HostpayOptionTotalOption = JSON.parse(JSON.stringify(option))
                // 实习职工；
                this.HostpayTraineePayOptionTotalOption = JSON.parse(JSON.stringify(option))
                if (this.stationPerson == 1) {
                    //平台,责任人 
                    let data = [{ value: 335, name: '直达' },
                    { value: 310, name: '营销广告' },
                    { value: 234, name: '搜索引擎' },
                    { value: 135, name: '邮件营销' },]
                    this.HostpayOptionTotalOption.series[0].data = data
                    // 实习员工
                    let data1 = [{ value: 35, name: '直达' },
                    { value: 30, name: '营销广告' },
                    { value: 34, name: '搜索引擎' },
                    { value: 35, name: '邮件营销' },]
                    this.HostpayTraineePayOptionTotalOption.series[0].data = data1
                } else { //台长
                    let data = [{ value: 3, name: '直达' },
                    { value: 1, name: '营销广告' },
                    { value: 2, name: '搜索引擎' },
                    { value: 5, name: '邮件营销' },]
                    this.HostpayOptionTotalOption.series[0].data = data
                    let data1 = [{ value: 3, name: '直达' },
                    { value: 1, name: '营销广告' },
                    { value: 2, name: '搜索引擎' },
                    { value: 3, name: '邮件营销' },]
                    this.HostpayTraineePayOptionTotalOption.series[0].data = data1
                }
            },
            // 提交时效明细
            getHostPayDetail() {
                let option = {
                    //   title: {
                    //     text: this.overTimeTitleList[1],
                    //     left: "center",
                    //     textStyle: this.globalVariable.fontColor
                    //   },
                    legend: {
                        data: ["提前5日及以上", "提前3日", "提前4日", "提前3日", "提前1日", "付薪当日提前"],
                        textStyle: this.globalVariable.legendTextStyle,
                        top: 12,
                        left: "center"
                    },
                    grid: {
                        left: "3%",
                        right: "4%",
                        bottom: "3%",
                        containLabel: true
                    },
                    xAxis: {
                        type: "value",
                        boundaryGap: [0, 0.01],
                        axisLabel: this.globalVariable.axisLabel,
                        axisLine: this.globalVariable.axisLine,
                        splitLine: this.globalVariable.splitLine
                    },
                    yAxis: {
                        type: "category",
                        data: [],
                        axisLabel: this.globalVariable.axisLabel,
                        axisLine: this.globalVariable.axisLine
                    },
                    // dataZoom: this.globalVariable.dataZoom,
                    series: []
                };
                if (this.stationPerson == 1) {
                    //责任人提交时效明细左
                    this.HostPrescriptionDetailOption = JSON.parse(JSON.stringify(option))
                    this.HostPrescriptionDetailOption.yAxis.data = ['人力1', '人力2', '人力3', '人力4', '业务部门']
                    let legend = ['人力1', '人力2', '人力3', '人力4', '业务部门']
                    let colorList = ["red", "blue", "pink", "green"];
                    legend.forEach((item, index) => {
                        let obj = {
                            name: item,
                            type: "bar",
                            stack: "总量",
                            barMinHeight: this.globalVariable.barMinHeight,
                            label: {
                                normal: {
                                    show: true,
                                    fontSize: this.globalVariable.itemFontSize
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: colorList[index]
                                } //this.globalVariable.itemBgColor
                            }
                        };
                        this.HostPrescriptionDetailOption.series.push(obj);
                    });
                    this.HostPrescriptionDetailOption.series[0].data = [22, 33, 44, 55]
                    this.HostPrescriptionDetailOption.series[1].data = [11, 12, 21, 31]
                    this.HostPrescriptionDetailOption.series[2].data = [31, 32, 34, 33]
                    this.HostPrescriptionDetailOption.series[3].data = [41, 42, 43, 44]
                    //责任人提交时效明细右
                    this.HostPrescriptionDetailOption1 = JSON.parse(JSON.stringify(option))
                    this.HostPrescriptionDetailOption1.yAxis.data = ['长三角', '西南', '环渤海', '华南']
                    let legend1 = ['长三角', '西南', '环渤海', '华南']
                    let colorList1 = ["red", "blue", "pink", "green"];
                    legend1.forEach((item, index) => {
                        let obj = {
                            name: item,
                            type: "bar",
                            stack: "总量",
                            barMinHeight: this.globalVariable.barMinHeight,
                            label: {
                                normal: {
                                    show: true,
                                    fontSize: this.globalVariable.itemFontSize
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: colorList1[index]
                                } //this.globalVariable.itemBgColor
                            }
                        };
                        this.HostPrescriptionDetailOption1.series.push(obj);
                    });
                    this.HostPrescriptionDetailOption1.series[0].data = [2, 3, 4, 5]
                    this.HostPrescriptionDetailOption1.series[1].data = [1, 2, 1, 3]
                    this.HostPrescriptionDetailOption1.series[2].data = [1, 2, 3, 3]
                    this.HostPrescriptionDetailOption1.series[3].data = [1, 4, 3, 4]
                    // 实习职工数据；
                    // 责任人提交时效明细左
                    this.HostPracticeDetailOption = JSON.parse(JSON.stringify(option))
                    this.HostPracticeDetailOption.yAxis.data = ['人力1', '人力2', '人力3', '人力4', '业务部门']
                    let legend2 = ['人力1', '人力2', '人力3', '人力4', '业务部门']
                    let colorList2 = ["red", "blue", "pink", "green"];
                    legend2.forEach((item, index) => {
                        let obj = {
                            name: item,
                            type: "bar",
                            stack: "总量",
                            barMinHeight: this.globalVariable.barMinHeight,
                            label: {
                                normal: {
                                    show: true,
                                    fontSize: this.globalVariable.itemFontSize
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: colorList2[index]
                                } //this.globalVariable.itemBgColor
                            }
                        };
                        this.HostPracticeDetailOption.series.push(obj);
                    });
                    this.HostPracticeDetailOption.series[0].data = [22, 33, 44, 55]
                    this.HostPracticeDetailOption.series[1].data = [11, 12, 21, 31]
                    this.HostPracticeDetailOption.series[2].data = [31, 32, 34, 33]
                    this.HostPracticeDetailOption.series[3].data = [41, 42, 43, 44]
                    // 责任人提交时效明细右
                    this.HostPracticeDetailOption1 = JSON.parse(JSON.stringify(option))
                    this.HostPracticeDetailOption1.yAxis.data = ['长三角', '西南', '环渤海', '华南']
                    let legend3 = ['长三角', '西南', '环渤海', '华南']
                    let colorList3 = ["red", "blue", "pink", "green"];
                    legend3.forEach((item, index) => {
                        let obj = {
                            name: item,
                            type: "bar",
                            stack: "总量",
                            barMinHeight: this.globalVariable.barMinHeight,
                            label: {
                                normal: {
                                    show: true,
                                    fontSize: this.globalVariable.itemFontSize
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: colorList3[index]
                                } //this.globalVariable.itemBgColor
                            }
                        };
                        this.HostPracticeDetailOption1.series.push(obj);
                    });
                    this.HostPracticeDetailOption1.series[0].data = [2, 3, 4, 5]
                    this.HostPracticeDetailOption1.series[1].data = [1, 2, 1, 3]
                    this.HostPracticeDetailOption1.series[2].data = [1, 2, 3, 3]
                    this.HostPracticeDetailOption1.series[3].data = [1, 4, 3, 4]
                } else { //台长
                    // 台长责任人提交时效明细左
                    this.HostPrescriptionDetailOption = JSON.parse(JSON.stringify(option))
                    this.HostPrescriptionDetailOption.yAxis.data = ['人力1', '人力2', '人力3', '人力4', '业务部门']
                    let legend = ['人力1', '人力2', '人力3', '人力4', '业务部门']
                    let colorList = ["red", "blue", "pink", "green"];
                    legend.forEach((item, index) => {
                        let obj = {
                            name: item,
                            type: "bar",
                            stack: "总量",
                            barMinHeight: this.globalVariable.barMinHeight,
                            label: {
                                normal: {
                                    show: true,
                                    fontSize: this.globalVariable.itemFontSize
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: colorList[index]
                                } //this.globalVariable.itemBgColor
                            }
                        };
                        this.HostPrescriptionDetailOption.series.push(obj);
                    });
                    this.HostPrescriptionDetailOption.series[0].data = [20, 30, 40, 50]
                    this.HostPrescriptionDetailOption.series[1].data = [10, 20, 10, 30]
                    this.HostPrescriptionDetailOption.series[2].data = [10, 20, 40, 30]
                    this.HostPrescriptionDetailOption.series[3].data = [10, 20, 30, 40]
                    // 台长责任人提交时效明细右
                    this.HostPrescriptionDetailOption1 = JSON.parse(JSON.stringify(option))
                    this.HostPrescriptionDetailOption1.yAxis.data = ['烟台', '北京', '南京', '杭州', '上海']
                    let legend1 = ['提前5日以上', '提前4日', '提前3日', '提前2日', '提前1日', '付薪前1日']
                    let colorList1 = ["red", "blue", "pink", "green", "#eee", '#000'];
                    legend1.forEach((item, index) => {
                        let obj = {
                            name: item,
                            type: "bar",
                            stack: "总量",
                            barMinHeight: this.globalVariable.barMinHeight,
                            label: {
                                normal: {
                                    show: true,
                                    fontSize: this.globalVariable.itemFontSize
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: colorList1[index]
                                } //this.globalVariable.itemBgColor
                            }
                        };
                        this.HostPrescriptionDetailOption1.series.push(obj);
                    });
                    this.HostPrescriptionDetailOption1.series[0].data = [27, 37, 47, 57, 67]
                    this.HostPrescriptionDetailOption1.series[1].data = [17, 27, 17, 37, 57]
                    this.HostPrescriptionDetailOption1.series[2].data = [17, 27, 37, 37, 47]
                    this.HostPrescriptionDetailOption1.series[3].data = [17, 47, 37, 47, 57]
                    this.HostPrescriptionDetailOption1.series[4].data = [7, 7, 7, 7, 7]
                    this.HostPrescriptionDetailOption1.series[5].data = [7, 7, 7, 7, 7]
                    // 实习职工明细数据；
                    // 台长提交时效明细左
                    this.HostPracticeDetailOption = JSON.parse(JSON.stringify(option))
                    this.HostPracticeDetailOption.yAxis.data = ['人力1', '人力2', '人力3', '人力4', '业务部门']
                    let legend2 = ['人力1', '人力2', '人力3', '人力4', '业务部门']
                    let colorList2 = ["red", "blue", "pink", "green"];
                    legend2.forEach((item, index) => {
                        let obj = {
                            name: item,
                            type: "bar",
                            stack: "总量",
                            barMinHeight: this.globalVariable.barMinHeight,
                            label: {
                                normal: {
                                    show: true,
                                    fontSize: this.globalVariable.itemFontSize
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: colorList2[index]
                                } //this.globalVariable.itemBgColor
                            }
                        };
                        this.HostPracticeDetailOption.series.push(obj);
                    });
                    this.HostPracticeDetailOption.series[0].data = [20, 30, 40, 50]
                    this.HostPracticeDetailOption.series[1].data = [10, 20, 10, 30]
                    this.HostPracticeDetailOption.series[2].data = [10, 20, 40, 30]
                    this.HostPracticeDetailOption.series[3].data = [10, 20, 30, 40]
                    // 台长提交时效明细左
                    this.HostPracticeDetailOption1 = JSON.parse(JSON.stringify(option))
                    this.HostPracticeDetailOption1.yAxis.data = ['烟台', '北京', '南京', '杭州', '上海']
                    let legend3 = ['提前5日以上', '提前4日', '提前3日', '提前2日', '提前1日', '付薪前1日']
                    let colorList3 = ["red", "blue", "pink", "green", "#eee", '#000'];
                    legend3.forEach((item, index) => {
                        let obj = {
                            name: item,
                            type: "bar",
                            stack: "总量",
                            barMinHeight: this.globalVariable.barMinHeight,
                            label: {
                                normal: {
                                    show: true,
                                    fontSize: this.globalVariable.itemFontSize
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: colorList3[index]
                                } //this.globalVariable.itemBgColor
                            }
                        };
                        this.HostPracticeDetailOption1.series.push(obj);
                    });
                    this.HostPracticeDetailOption1.series[0].data = [27, 37, 47, 57, 67]
                    this.HostPracticeDetailOption1.series[1].data = [17, 27, 17, 37, 57]
                    this.HostPracticeDetailOption1.series[2].data = [17, 27, 37, 37, 47]
                    this.HostPracticeDetailOption1.series[3].data = [17, 47, 37, 47, 57]
                    this.HostPracticeDetailOption1.series[4].data = [7, 7, 7, 7, 7]
                    this.HostPracticeDetailOption1.series[5].data = [7, 7, 7, 7, 7]
                }
            },
            // 处理分析
            getHostAverageDuration() {
                let option = {
                    //   title: {
                    //     text: this.overTimeTitleList[1],
                    //     left: "center",
                    //     textStyle: this.globalVariable.fontColor
                    //   },
                    legend: {
                        data: [],
                        textStyle: this.globalVariable.legendTextStyle,
                        top: 12,
                        left: "center"
                    },
                    grid: {
                        left: "3%",
                        right: "4%",
                        bottom: "3%",
                        containLabel: true
                    },
                    xAxis: {
                        type: "value",
                        boundaryGap: [0, 0.01],
                        min: 0.5,
                        max: 14.5,
                        axisLabel: this.globalVariable.axisLabel,
                        axisLine: this.globalVariable.axisLine,
                        splitLine: this.globalVariable.splitLine
                    },
                    yAxis: {
                        type: "category",
                        data: [],
                        axisLabel: this.globalVariable.axisLabel,
                        axisLine: this.globalVariable.axisLine
                    },
                    series: []
                };
                if (this.stationPerson == 1) {
                    // 责任人平台汇总数据
                    this.HostAverageDurationOption = JSON.parse(JSON.stringify(option))
                    this.HostPracticeAverageDurationOption = JSON.parse(JSON.stringify(option))
                    this.HostAverageDurationOption.yAxis.data = ['平台汇总']
                    this.HostPracticeAverageDurationOption.yAxis.data = ['平台汇总']
                    let legend = ["业务审批", "共享审批", "支付"]
                    let colorList = ["red", "blue", "pink"];
                    legend.forEach((item, index) => {
                        let obj = {
                            name: item,
                            type: "bar",
                            stack: "总量",
                            barMinHeight: this.globalVariable.barMinHeight,
                            label: {
                                normal: {
                                    show: true,
                                    fontSize: this.globalVariable.itemFontSize
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: colorList[index]
                                } //this.globalVariable.itemBgColor
                            },
                            data: []
                        };
                        this.HostAverageDurationOption.series.push(obj);
                        this.HostPracticeAverageDurationOption.series.push(obj)
                    });
                    this.HostAverageDurationOption.series[0].data = [2]
                    this.HostAverageDurationOption.series[1].data = [2]
                    this.HostAverageDurationOption.series[2].data = [8]
                    // 实习职工数据；
                    this.HostPracticeAverageDurationOption.series[0].data = [1]
                    this.HostPracticeAverageDurationOption.series[1].data = [3]
                    this.HostPracticeAverageDurationOption.series[2].data = [2]
                    // 平均处理明细。
                    this.HostPayCalendarOption = JSON.parse(JSON.stringify(option))
                    this.HostpracticePayCalendarOption = JSON.parse(JSON.stringify(option))
                    this.HostPayCalendarOption.yAxis.data = ['环渤海', '长三角', '华南', '西南']
                    this.HostpracticePayCalendarOption.yAxis.data = ['环渤海', '长三角', '华南', '西南']
                    let legend1 = ["业务审批", "共享审批", "支付"]
                    let colorList1 = ["red", "blue", "pink"];
                    legend1.forEach((item, index) => {
                        let obj = {
                            name: item,
                            type: "bar",
                            stack: "总量",
                            barMinHeight: this.globalVariable.barMinHeight,
                            label: {
                                normal: {
                                    show: true,
                                    fontSize: this.globalVariable.itemFontSize
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: colorList1[index]
                                } //this.globalVariable.itemBgColor
                            },
                            data: []
                        };
                        this.HostPayCalendarOption.series.push(obj);
                        this.HostpracticePayCalendarOption.series.push(obj)
                    });
                    this.HostPayCalendarOption.series[0].data = [2, 1, 2]
                    this.HostPayCalendarOption.series[1].data = [2, 3, 2]
                    this.HostPayCalendarOption.series[2].data = [8, 3, 4]
                    // 实习职工
                    this.HostpracticePayCalendarOption.series[0].data = [2, 1, 2]
                    this.HostpracticePayCalendarOption.series[1].data = [2, 3, 2]
                    this.HostpracticePayCalendarOption.series[2].data = [8, 3, 4]
                } else { //台长
                    this.HostAverageDurationOption = JSON.parse(JSON.stringify(option))
                    this.HostPracticeAverageDurationOption = JSON.parse(JSON.stringify(option))
                    this.HostAverageDurationOption.yAxis.data = ['平均处理时长']
                    this.HostPracticeAverageDurationOption.yAxis.data = ['平均处理时长']//实习员工
                    let legend = ["业务审批", "共享审批", "支付"]
                    let colorList = ["red", "blue", "pink"];
                    legend.forEach((item, index) => {
                        let obj = {
                            name: item,
                            type: "bar",
                            stack: "总量",
                            barMinHeight: this.globalVariable.barMinHeight,
                            label: {
                                normal: {
                                    show: true,
                                    fontSize: this.globalVariable.itemFontSize
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: colorList[index]
                                } //this.globalVariable.itemBgColor
                            },
                            data: []
                        };
                        this.HostAverageDurationOption.series.push(obj);
                        this.HostPracticeAverageDurationOption.series.push(obj);
                    });
                    this.HostAverageDurationOption.series[0].data = [5]
                    this.HostAverageDurationOption.series[1].data = [3]
                    this.HostAverageDurationOption.series[2].data = [3]
                    // 平均处理明细 实习
                    this.HostPracticeAverageDurationOption.series[0].data = [6]
                    this.HostPracticeAverageDurationOption.series[1].data = [2]
                    this.HostPracticeAverageDurationOption.series[2].data = [4]
                }
            },
            getHostPayFindCalendar() { //台长视角付薪日历
                let option = {
                    //   title: {
                    //     text: this.overTimeTitleList[1],
                    //     left: "center",
                    //     textStyle: this.globalVariable.fontColor
                    //   },
                    legend: {
                        data: [],
                        textStyle: this.globalVariable.legendTextStyle,
                        top: 12,
                        left: "center"
                    },
                    grid: {
                        left: "3%",
                        right: "4%",
                        bottom: "3%",
                        containLabel: true
                    },
                    xAxis: {
                        type: "value",
                        boundaryGap: [0, 0.01],
                        min: 0.5,
                        max: 14.5,
                        axisLabel: this.globalVariable.axisLabel,
                        axisLine: this.globalVariable.axisLine,
                        splitLine: this.globalVariable.splitLine
                    },
                    yAxis: {
                        type: "category",
                        data: [],
                        axisLabel: this.globalVariable.axisLabel,
                        axisLine: this.globalVariable.axisLine
                    },
                    series: []
                };
                this.HostPayFindCalendarOption = JSON.parse(JSON.stringify(option))
                this.HostpracticePayFindCalendarOption = JSON.parse(JSON.stringify(option))
                this.HostPayFindCalendarOption.yAxis.data = ['重庆1', '重庆2', '成都1', '成都2']
                this.HostpracticePayFindCalendarOption.yAxis.data = ['重庆1', '重庆2', '成都1', '成都2']
                //台长视角付薪日历实习员工
                let legend = ["提交", "业务审批", "共享审批", "支付"]
                let colorList = ["red", "blue", "pink", 'yellow'];
                legend.forEach((item, index) => {
                    let obj = {
                        name: item,
                        type: "bar",
                        stack: "总量",
                        barMinHeight: this.globalVariable.barMinHeight,
                        label: {
                            normal: {
                                show: true,
                                fontSize: this.globalVariable.itemFontSize
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: colorList[index]
                            } //this.globalVariable.itemBgColor
                        },
                        data: []
                    };
                    this.HostPayFindCalendarOption.series.push(obj);
                    this.HostpracticePayFindCalendarOption.series.push(obj)
                });
                this.HostPayFindCalendarOption.series[0].data = [2, 3, 4, 5]
                this.HostPayFindCalendarOption.series[1].data = [2, 1, 2, 3]
                this.HostPayFindCalendarOption.series[2].data = [8, 1, 2, 3]
                this.HostPayFindCalendarOption.series[3].data = [8, 1, 2, 3]
                // 实习
                this.HostpracticePayFindCalendarOption.series[0].data = [2, 2, 2, 2]
                this.HostpracticePayFindCalendarOption.series[1].data = [2, 2, 2, 2]
                this.HostpracticePayFindCalendarOption.series[2].data = [3, 3, 2, 3]
                this.HostpracticePayFindCalendarOption.series[3].data = [4, 2, 2, 4]
            },
            getPaymentDetails() {
                let option = {
                    //   title: {
                    //     text: this.overTimeTitleList[1],
                    //     left: "center",
                    //     textStyle: this.globalVariable.fontColor
                    //   },
                    legend: {
                        data: [],
                        textStyle: this.globalVariable.legendTextStyle,
                        top: 12,
                        left: "center"
                    },
                    grid: {
                        left: "3%",
                        right: "4%",
                        bottom: "3%",
                        containLabel: true
                    },
                    xAxis: {
                        type: "value",
                        boundaryGap: [0, 0.01],
                        min: 0.5,
                        max: 14.5,
                        axisLabel: this.globalVariable.axisLabel,
                        axisLine: this.globalVariable.axisLine,
                        splitLine: this.globalVariable.splitLine
                    },
                    yAxis: {
                        type: "category",
                        data: [],
                        axisLabel: this.globalVariable.axisLabel,
                        axisLine: this.globalVariable.axisLine
                    },
                    series: []
                };
                if (this.stationPerson == 1) {
                    this.HostPaymentDetailsOption = JSON.parse(JSON.stringify(option))
                    this.HostPracticePaymentDetailsOption = JSON.parse(JSON.stringify(option))
                    this.HostPaymentDetailsOption.yAxis.data = ['西南', '环渤海', '华南', '长三角']
                    this.HostPracticePaymentDetailsOption.yAxis.data = ['西南', '环渤海', '华南', '长三角']
                    //台长视角付薪日历实习员工
                    let legend = ["业务审批中", "共享审批中", "支付中"]
                    let colorList = ["red", "blue", "pink"];
                    legend.forEach((item, index) => {
                        let obj = {
                            name: item,
                            type: "bar",
                            stack: "总量",
                            barMinHeight: this.globalVariable.barMinHeight,
                            label: {
                                normal: {
                                    show: true,
                                    fontSize: this.globalVariable.itemFontSize
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: colorList[index]
                                } //this.globalVariable.itemBgColor
                            },
                            data: []
                        };
                        this.HostPaymentDetailsOption.series.push(obj);
                        this.HostPracticePaymentDetailsOption.series.push(obj)
                    });
                    this.HostPaymentDetailsOption.series[0].data = [2, 3, 4, 4]
                    this.HostPaymentDetailsOption.series[1].data = [2, 1, 2, 3]
                    this.HostPaymentDetailsOption.series[2].data = [8, 1, 2, 3]
                    // 实习
                    this.HostPracticePaymentDetailsOption.series[0].data = [2, 2, 2, 2]
                    this.HostPracticePaymentDetailsOption.series[1].data = [2, 2, 2, 2]
                    this.HostPracticePaymentDetailsOption.series[2].data = [3, 3, 2, 3]
                } else {
                    this.HostPaymentDetailsOption = JSON.parse(JSON.stringify(option))
                    this.HostPracticePaymentDetailsOption = JSON.parse(JSON.stringify(option))
                    this.HostPaymentDetailsOption.yAxis.data = ['云南', '贵阳', '郑州', '西安','新疆','北京']
                    this.HostPracticePaymentDetailsOption.yAxis.data =  ['云南', '贵阳', '郑州', '西安','新疆','北京']
                    //台长视角付薪日历实习员工
                    let legend = ["业务审批中", "打包邮递中", "共享审批","支付中"]
                    let colorList = ["red", "blue", "pink","green"];
                    legend.forEach((item, index) => {
                        let obj = {
                            name: item,
                            type: "bar",
                            stack: "总量",
                            barMinHeight: this.globalVariable.barMinHeight,
                            label: {
                                normal: {
                                    show: true,
                                    fontSize: this.globalVariable.itemFontSize
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: colorList[index]
                                } //this.globalVariable.itemBgColor
                            },
                            data: []
                        };
                        this.HostPaymentDetailsOption.series.push(obj);
                        this.HostPracticePaymentDetailsOption.series.push(obj)
                    });
                    this.HostPaymentDetailsOption.series[0].data = [2, 3, 4, 4,5,6]
                    this.HostPaymentDetailsOption.series[1].data = [2, 1, 2, 3,1,2]
                    this.HostPaymentDetailsOption.series[2].data = [8, 1, 2, 3,1,2]
                    this.HostPaymentDetailsOption.series[3].data = [8, 1, 2, 3,3,4]
                    // 实习
                    this.HostPracticePaymentDetailsOption.series[0].data = [2, 2, 2, 2,4,4]
                    this.HostPracticePaymentDetailsOption.series[1].data = [2, 2, 2, 2,5,5]
                    this.HostPracticePaymentDetailsOption.series[2].data = [3, 3, 2, 3,5,6]
                    this.HostPracticePaymentDetailsOption.series[3].data = [3, 3, 2, 3,6,7]
                }

            }
        },
    };
</script>
<style>
    .payOptionTotal,
    .averageduration,
    .PracticeAverageDuration,
    .raineePayOption,
    .PayCalendar,
    .practicePayCalendar,
    .PayFindCalendar,
    .HostpracticePayFindCalendar,
    .practicePaymentDetails,
    .paymentDetails {
        height: 4rem;
    }

    .prescriptionDetailOne,
    .prescriptionDetailTwo,
    .HostPracticeDetailOne,
    .HostPracticeDetailTwo {
        height: 4rem;
        width: 50%;
    }
</style>